<template>
    <div>
        <h2>parent = 父组件 </h2>
        <h2>c==={{c}}</h2>
        <h2 @click="change(200)">num -- {{num}}</h2>
        <button @click="changeShow">点击修改子组件 </button>
        <button @click="changeOne">ref 点击修改子组件 word </button>
        <hr>
        <child-one :c="c" :num="num" :show="show" ref="one"> </child-one>
        <hr>
        <child-two :num1="change" @changec="changedata">
            <div>
                <h2>天道酬勤</h2>
                <h2>未来可期</h2>
            </div>

            <template #demo>
                <div>
                    <h2>0223</h2>
                    <h2>希望疫情赶紧过期</h2>
                </div>
            </template>
        </child-two>
    </div>
</template>


<script>
import ChildOne from './ChildOne.vue'
import ChildTwo from './ChildTwo.vue'
export default {
    data(){
        return {
            num:1000,
            show:true ,
            c:10
        }
    },
    methods:{
        change(n){
            this.num+=n;
        },
        changeShow(){
            this.show =!this.show 
        },
        changeOne(){
            this.$refs.one.word = "晚上认真学习Vue..."
        },
        change(d){
            this.c+=d
        },
        changedata(d){
            this.c+=d;
        }
    },
    components:{
        ChildOne,
        ChildTwo
    }
}
</script>